<template>
  <div class="articleDetail-container">

    <el-card shadow="never">
<!--      页头-->
      <div slot="header">
        <!--    页头-->
        <PageHeader :title="this.$route.meta.title" ></PageHeader>
        <p  style="font-size: 30px;font-family: handWrite;">{{articleDetail.title}}</p>
        <p style="margin-top: 10px;font-size: 15px;color: gray;">
          <i  class=" el-icon-notebook-1" ></i>
          {{articleDetail.categoryName}}

          <i style="margin-left: 20px;" class=" el-icon-time" ></i>
          <span style="margin-left: 10px;">{{articleDetail.createTime}}</span>
          <i class="el-icon-view" style="margin-left: 20px;"></i>
          {{articleDetail.viewCount}} 浏览
        </p>

      </div>
      <p class="article-content">
        {{articleDetail.content}}
      </p>
      <el-divider></el-divider>
<!--      联系信息-->
      友情赞助
    </el-card>

    <el-card shadow="never" style="margin:20px 0 ;">
      <div slot="header" style="font-size: 20px;">
        评论
      </div>
<!--      评论组件-->
      <CommentCom :comments="commentData" :user-info="userInfo" :article-id="parseInt(articleId)"></CommentCom>
    </el-card>
  </div>
</template>

<script>

import {reqArticleComment, reqArticleDetail, reqUserInfo} from "@/API";
import PageHeader from "@/components/pageHeader";
import CommentCom from "@/components/Comment"
// import * as CommentData from "@/mock/mockdata"

export default {
  name: 'articleDetail',
  components:{
    CommentCom,
    PageHeader
  },
  data(){
    return {
      //文章数据
      articleDetail:{},
      commentData:[],
      articleId:-1,
      //评论分页
      pageNum: 1,
      pageSize: 10,
      //userInfo
      userInfo:{},
    }
  },

  mounted() {
    this.init()

  },
  methods:{

    //初始化数据
    init(){
      //获取文章数据
      this.articleId = localStorage.getItem("articleId")
      this.getArticle()

      //获取评论信息
      this.getComment()

      this.getUserInfo()

    },
    //获取用户信息
    getUserInfo() {
      reqUserInfo().then((res) =>{
        if(res.status === 200){
          this.userInfo = res.data
        }else{
          this.userInfo = {id:-1}
        }
      })
    },

    //获取文章数据
    getArticle(){
      reqArticleDetail(this.articleId).then((res) =>{
        if(res.status === 200){
          this.articleDetail = res.data
        }else{
          this.$message.info("网络不稳定，请稍后重试！")
        }
      })
    },

    //获取评论信息
    getComment(){
      let params = {
        articleId:this.articleId,
        pageNum:this.pageNum,
        pageSize:this.pageSize
      }

      reqArticleComment(params).then((res) =>{
        if(res.status === 200){
          //传递评论数据
          console.log(res.data.rows)
          this.commentData = res.data.rows;
        }else{
          this.$message.info("网络不稳定，请稍后重试！")
        }
      })
    }
    ,

  }
}
</script>

<style>
.articleDetail-container{
  margin:10px auto;
  width:90%;
}
.article-content{
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 40px;
  font-family: 方正书宋简体;
}
</style>
